<template>
  <div>
    <nav-bar title="实时巡检">
      <template v-slot:right>
        <span @click="realTimeStatistical" v-show="user && user.userType === '01'">统计</span>
      </template>
    </nav-bar>
    <div class="maxinBox">
      <van-dropdown-menu>
        <van-dropdown-item v-model="form.dutyType" :options="myAboutLists" v-if="user && user.userType === '01'" @change="getInfo" />
        <van-dropdown-item v-model="form.dutyType" :options="myAboutList" v-else @change="getInfo" />
        <van-dropdown-item v-model="form.reformStatus" :options="statusList" @change="getInfo" />
        <van-dropdown-item v-model="form.overTime" :options="timeOutList" @change="getInfo" />
      </van-dropdown-menu>
      <div class="realTimeInspection backgroundfff" v-if="realTimeTaskList.length">
        <van-row class="realTimeTask" v-for="(item, index) in realTimeTaskList" :key="index">
          <van-col :span="7" style="padding: 0.3125rem;height: 9.375rem;" v-if="item.trouble && item.trouble.troubleAttachmentList">
            <img style="height: 100%;object-fit: cover;" :src="item.trouble.troubleAttachmentList[0]" alt="" @click="bigImg(item.trouble.troubleAttachmentList[0])">
          </van-col>
          <van-col :span="13">
            <div class="fontSize16">发起人: {{item.userName}}</div>
            <div style="color: #666;" class="fontSize14">电话: {{item.createBy}}</div>
            <div v-if="item.trouble && item.trouble.categoryName" style="color: #666;" class="fontSize14">问题类别: {{item.trouble.categoryName || ''}}</div>
            <div style="color: #666;" class="fontSize14">截止日期: {{item.expireDate | formatDate('YYYY-MM-DD HH:mm')}}</div>
            <div>
              <van-button v-if="item.riskLevel === 1" size="mini" plain type="primary">I级</van-button>
              <van-button v-if="item.riskLevel === 2" size="mini" plain type="warning">II级</van-button>
              <van-button v-if="item.riskLevel === 3" size="mini" plain type="danger">III级</van-button>
              <!-- <van-button size="mini" plain type="danger">超时</van-button> -->
            </div>
          </van-col>
          <van-col :span="4" v-if="item.trouble" @click="taskDetails(item)">
            <van-button class="vanButton" v-if="item.reformStatus === 2" size="small" round plain type="default">已完成</van-button>
            <van-button class="vanButtonActive" v-else-if="item.reformStatus === 1" round plain size="small" type="default">未完成</van-button>
            <van-button class="vanButton" v-else round plain size="small" type="default">已撤销</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="initiate" @click="onInitiate" v-show="user && user.userType === '01'">
      发起
    </div>
  </div>
</template>

<script>
  import {ImagePreview} from 'vant'
  import messageAPI from '../../../api/messageAPI.js'
  import realTimeInspectionAPI from '../../../api/workAPI/realTimeInspectionAPI.js'
  export default {
    data() {
      return {
        user: {
          userStatus: '',
          userType: '',
        },
        form: {
          reformStatus: 0,
          overTime: 2,
          dutyType: '',
          projectId: localStorage.getItem('projectId')
        },
        realTimeTaskList: [],
        myAboutList: [
          { text: '我整改的', value: 1 },
          { text: '抄送我的', value: 2 },
        ],
        myAboutLists: [
          { text: '我发起的', value: 3 },
          { text: '抄送我的', value: 2 },
        ],
        statusList: [
          { text: '全部', value: 0 },
          { text: '未完成', value: 1 },
          { text: '已完成', value: 2 },
          { text: '已撤销', value: 3 },
        ],
        timeOutList: [
          { text: '未超时', value: 0 },
          { text: '已超时', value: 1 },
          { text: '全部', value: 2 },
        ],
      }
    },
    methods: {
      // 放大图片
      bigImg(img) {
        ImagePreview({
           images: [img],
        })
      },
      // 查询我发起的
      getInfo() {
        this.realTimeTask = JSON.parse(JSON.stringify(this.form))
        if (this.form.reformStatus === 0) {
          this.realTimeTask.reformStatus = ''
        }
        if (this.form.overTime === 2) {
          this.realTimeTask.overTime = ''
        }
        if (this.form.dutyType === 3) {
          let data = {
            pageNum: 1,
            pageSize: 500,
            overTime: this.realTimeTask.overTime,
            projectId: localStorage.getItem('projectId'),
            reformStatus: this.realTimeTask.reformStatus
          }
          realTimeInspectionAPI.getMyInitiate(data).then(res => {
            this.realTimeTaskList = res
          })
        } else {
          let data = {
            pageNum: 1,
            pageSize: 500,
            overTime: this.realTimeTask.overTime,
            projectId: localStorage.getItem('projectId'),
            reformStatus: this.realTimeTask.reformStatus,
            dutyType: this.realTimeTask.dutyType
          }
          realTimeInspectionAPI.getAboutMy(data).then(res => {
            this.realTimeTaskList = res
          })
        }
        var data = {
          reformStatus: this.form.reformStatus,
          overTime: this.form.overTime,
          projectId: localStorage.getItem('projectId')
        }
      },
      realTimeStatistical() {
        this.$router.push({
          path: 'RealTimeStatistical'
        })
      },
      // 发起实时检
      onInitiate() {
        // this.$store.commit('changeReInitiate', null)
        // localStorage.removeItem('reInitiate')
        this.$router.push({
          name: 'InitiateRealTime'
        })
      },
      // 查看任务详情
      taskDetails(data) {
        if (this.form.dutyType === 2) {
          messageAPI.delInspection(data.trouble.id)
        }
        if (data.completed === 0 && this.form.dutyType === 1) {
          let realTimeDetails = {
            itemData: data,
            status: this.form.dutyType,
            desc: '实时检'
          }
          localStorage.setItem('realTimeDetails', JSON.stringify(realTimeDetails))
          if (!data.reformStatus === 3) {
            this.$router.push({
              name: 'RealTimeRectificationTask'
            })
          }
        } else {
          let realTimeDetails = {
            status: this.form.reformStatus,
            itemData: data,
            selectType: this.form.dutyType
          }
          localStorage.setItem('realTimeDetails', JSON.stringify(realTimeDetails))
          this.$router.push({
            name: 'RealTimeTaskDetails'
          })
        }
      }
    },
    mounted() {
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
      if (this.user && this.user.userType === '01') {
        this.form.dutyType = 3
      } else {
        this.form.dutyType = 1
      }
      this.getInfo()
    }
  }
</script>

<style scoped lang="scss">
  .initiate{
    position: fixed;
    right: 0;
    // top: 25%;
    // left: 45%;
    bottom: -2%;
    float: right;
    text-align: center;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    background-color: #1577FF;
    font-size: 0.875rem;
    color: #fff;
    margin: 1.25rem 1.25rem 1.25rem 0;
  }
  .realTimeInspection{
    .realTimeTask{
      padding: 0.9375rem;
      font-size: 0.875rem;
      border-bottom: 0.0625rem solid #E5E5E5;
      .van-col--13 div{
        padding-bottom: 0.3125rem;
      }
      .van-col--7{
        height: 6.875rem;
        line-height: 6.875rem;
        img{
          width: 100%;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
</style>
